<template>
    <div>
        <el-row class="top">
            <el-col :span="6">
                <div class="search-container">
                    <div >
                        <el-select
                            class="select"
                            v-model="queryParams.engineType"
                            multiple
                            filterable
                            remote
                            reserve-keyword
                            placeholder="搜索型号"
                            :remote-method="remoteMethod"
                            :loading="loading">
                            <el-option
                                v-for="item in featSelected"
                                :key="item.id"
                                :label="item.label"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </div>
                    <el-button type="primary" class="search-icon" icon="el-icon-search" @click="handleQuery"></el-button>
                </div>

            </el-col>
            <el-col :span="16"><div class="top-tag">
                <el-tag
                    class="tag"
                    :key="tag[0]"
                    v-for="tag in featSelected"
                    closable
                    :disable-transitions="false"
                    @close="handleClose(tag[0])">
                    {{tag[2]+"-"+tag[1]}}
                </el-tag>
                <el-input
                    class="input-new-tag"
                    v-if="inputVisible"
                    v-model="inputValue"
                    ref="saveTagInput"
                    size="small"
                    @keyup.enter.native="handleInputConfirm"
                    @blur="handleInputConfirm"
                    >
                </el-input>
                <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
            </div></el-col>
            <el-col :span="2"><div class="Arrange-setting">
              <el-button type="primary" icon="el-icon-share"></el-button>
            </div></el-col>
        </el-row>
        <el-row>
            <el-col :span="6"><div class="grid-content">
                <el-card class="box-card-tag">
                    <div>
                        <el-radio-group v-model="radio1">
                            <el-radio-button label="军用"></el-radio-button>
                            <el-radio-button label="商用"></el-radio-button>
                        </el-radio-group>
                    </div>
                    <div width="200px">
                        <h3>部件检索</h3>
<!--                      <el-select v-model="this.functionFeatId" filterable placeholder="请选择" class="select">-->
<!--                      加了this之后一直报错 Error in render: “TypeError: Cannot read properties of null (reading ‘___ob___’)”-->
                      <el-select v-model="functionFeatId" filterable placeholder="请选择" class="select" @change="functionFeatChange">
                        <el-option
                            v-for="item in functionFeat"
                            :key="item.id"
                            :label="item.label"
                            :value="item.id">
                        </el-option>
                      </el-select>
<!--                        <UnitSearch />-->
                      <div v-for="(item,index) in functionFeatArray" :key="item.label" class="radio">
                        <span>{{item.label}}</span>
                        <el-radio-group v-model="featRadio[item.id]" >
                          <el-radio
                              v-for="subitem in item.children"
                              :label="subitem.id"
                              :key="subitem.id"
                              @change="(value) =>changeFeatSelected(value,subitem.label,item.label)">
                            {{ subitem.label }}
                          </el-radio>
                        </el-radio-group>
                      </div>

                      <h3>选择: {{this.functionFeatId}}</h3>
                    </div>
                    <div>
                        <h3>整体检索</h3>
<!--                        <SelectEntirety />-->
                      <el-select v-model="beautyFeatId" filterable placeholder="请选择" class="select">
                      <el-option
                          v-for="item in beautyFeat"
                          :key="item.id"
                          :label="item.label"
                          :value="item.id">
                      </el-option>
                      </el-select>
                        <Slider />
                        <SelectEntirety2 />
                        <Slider2 />
                    </div>
                </el-card>
            </div></el-col>
            <el-col :span="18"><div class="grid-content">
                <el-card class="box-card-result" >

                    <!-- <el-row>
                        <el-col :span="10" v-for="(o, index) in 2" :key="o" :offset="index > 0 ? 2 : 0">
                            <el-card :body-style="{ padding: '10px' }" style="margin-top: 10px;" > 
                            <img src="../assets/pig.webp" class="image">
                            <div style="padding: 14px;">
                                <span>一只飞猪</span>
                                <div class="bottom clearfix">
                                <time class="time">{{ currentDate }}</time>
                                <el-button type="text" class="button">操作按钮</el-button>
                                </div>
                            </div>
                            </el-card>
                        </el-col>
                    </el-row> -->
                   
                    <!-- <el-row>
                        <el-col :span="10" v-for="(o, index) in 2" :key="o" :offset="index > 0 ? 2 : 0">
                            <el-card :body-style="{ padding: '10px' }" style="margin-top: 10px;" >
                            <img src="../assets/pig.webp" class="image">
                            <div style="padding: 14px;">
                                <span>一只飞猪</span>
                                <div class="bottom clearfix">
                                <time class="time">{{ currentDate }}</time>
                                <el-button type="text" class="button">操作按钮</el-button>
                                </div>
                            </div>
                            </el-card>
                        </el-col>
                    </el-row> -->

                    <el-row v-for="(key,index) in total/2" :key="key">
                      <el-col :span="10" v-for="(subkey,subindex) in 2" :key="subkey">
                        <el-card>
                        <img src="../assets/pig.webp" class="image">
                        <el-col :span="6">
                          <!-- <img src="../assets/pig.webp" class="image"> -->
                          <p>这里是一张分析图表（doge</p>
                        </el-col>
                        <el-col :span="4">
                        <p>{{ engineList[index*2+subindex].engineType }}</p>
                        <p>公司：{{ engineList[index*2+subindex].company }}</p>
                        <p>使用时间：{{ engineList[index*2+subindex].engineYear }}年</p>
                        </el-col>
                      </el-card>
                      </el-col>
                    </el-row>
                    
                </el-card>
            </div></el-col>
        </el-row>
    </div>    
</template>

<script>
import SelectPart from '../components/search/SelectPart.vue';
import UnitSearch from '../components/search/UnitSearch.vue';
import SelectEntirety from '@/components/search/SelectEntirety.vue';
import Slider from '@/components/search/Slider.vue';
import SelectEntirety2 from '@/components/search/SelectEntirety2.vue';
import Slider2 from '@/components/search/Slider2.vue';

import {
  featTreeSelect,
  listEngine
} from "@/api/system/engine";
import {listByParent} from "@/api/system/feat";

export default{
    data(){
        return{
        currentDate: new Date(),
        options: [],
        value: [],
        list: [],
        loading: false,
        states: ["Alabama", "Alaska", "Arizona",
        "Arkansas", "California", "Colorado",
        "Connecticut", "Delaware", "Florida",
        "Georgia", "Hawaii", "Idaho", "Illinois",
        "Indiana", "Iowa", "Kansas", "Kentucky",
        "Louisiana", "Maine", "Maryland",
        "Massachusetts", "Michigan", "Minnesota",
        "Mississippi", "Missouri", "Montana",
        "Nebraska", "Nevada", "New Hampshire",
        "New Jersey", "New Mexico", "New York",
        "North Carolina", "North Dakota", "Ohio",
        "Oklahoma", "Oregon", "Pennsylvania",
        "Rhode Island", "South Carolina",
        "South Dakota", "Tennessee", "Texas",
        "Utah", "Vermont", "Virginia",
        "Washington", "West Virginia", "Wisconsin",
        "Wyoming"],

        inputVisible: false,
        inputValue: '',
        radio1: '军用',
        radio2: '军用',


          //新增
          //发动机名称
          engineName:undefined,
          // 特征选项
          featOptions: undefined,
          // 发动机表格数据
          engineList: null,
          // 发动机表格数据个数
          total:null,
          // halfTotal:null,
          //选中特征标签：
          featSelected: [],
          featRadio: [],

          //功能特征群：
          functionFeat:null,
          //美学特征群：
          beautyFeat:null,
          //子特征：
          childFeat:null,


          functionFeatId:undefined,
          functionFeatArray:null,
          beautyFeatId:undefined,
          beautyFeatArray:null,

          //查询参数
          queryParams: {
            engineType:undefined,
            company:undefined,
            featId:undefined,
            featIds: [],
            searchValue:undefined,
          },
        }
    },
    components:{
        SelectPart,
        UnitSearch,
        SelectEntirety,
        Slider,
        SelectEntirety2,
        Slider2,
    },
  created() {
      this.getList();
      this.getFeatTree();
  },
    mounted() {
      this.list = this.states.map(item => {
        return { value: `value:${item}`, label: `label:${item}` };
      });
    },
    methods: {
      remoteMethod(query) {
        if (query !== '') {
          this.loading = true;
          setTimeout(() => {
            this.loading = false;
            this.options = this.list.filter(item => {
              return item.label.toLowerCase()
                .indexOf(query.toLowerCase()) > -1;
            });
          }, 200);
        } else {
          this.options = [];
        }
      },

      handleClose(tag) {
        this.featSelected.splice(this.featSelected.indexOf(tag), 1);
      },

      showInput() {
        this.inputVisible = true;
        this.$nextTick(_ => {
          this.$refs.saveTagInput.$refs.input.focus();
        });
      },

      handleInputConfirm() {
        let inputValue = this.inputValue;
        if (inputValue) {
          this.featSelected.push(inputValue);
        }
        this.inputVisible = false;
        this.inputValue = '';
      },

      /** 查询发动机列表 */
      getList() {
        this.loading = true;
        listEngine(this.queryParams).then(response => {
              //console.log(response);
              this.engineList = response.data.rows;
              this.total = response.data.total;
              // this.halfTotal = this.total / 2;
              // console.log(this.halfTotal);
              this.loading = false;
              //console.log(response.data.rows);
            }
        );
      },


      /** 查询特征下拉树结构 */
      getFeatTree() {
        featTreeSelect().then(response => {
          this.featOptions = response.data;
          //不知道为什么一定要再赋值一次data才行
          this.featOptions = this.featOptions.data;

          for(const item in this.featOptions){
            if(this.featOptions[item].id==101){
              this.functionFeat = this.featOptions[item].children;
              //console.log(this.functionFeat);
            }
            if(this.featOptions[item].id==152){
              this.beautyFeat = this.featOptions[item].children;
              //console.log("初始化美化特征群完成");
            }
          }
          //可以优化：按照特征个数生成数组
          for(let i=0;i<500;i++){
            this.featRadio[i]=0;
          }
        });
      },

      /** 选择特征触发 */
      functionFeatChange(value) {
        for(const item in this.functionFeat) {
          if (this.functionFeat[item].id == value) {
            this.functionFeatArray = this.functionFeat[item].children;
          }
        }

        for(const item in this.beautyFeat) {
          if (this.beautyFeat[item].id == value) {
            this.beautyFeatArray = this.beautyFeat[item].children;
          }
        }
      },

      /** 获取子特征*/
      getChildFeat(parentId) {
        this.loading = true;
        //获取功能特征群
        listByParent(parentId).then(response => {
              this.childFeat = response.rows;
            }
        );
      },

      /** 特征单击事件 */
      changeFeatSelected(data,label,parentLabel) {
        console.log(this.featRadio);
        let isRepeat = false;
        // this.featSelected.map(item => {
        //   if (data.id == item.id) {
        //     isRepeat = true;
        //     return;
        //   }
        // });
        let array=[data,label,parentLabel];
        if (!isRepeat && this.featSelected ) {
          this.featSelected =  this.featSelected.concat([array]);
        }
        this.queryParams.featIds=this.featSelected.map(item =>(item[0]));
        console.log(this.queryParams.featIds);
        this.queryParams.searchValue=this.queryParams.featIds.length;
        console.log(this.featSelected);
        this.handleQuery();
      },

      /** 关闭特征标签 */
      closeLabel(featId) {
        this.featSelected = this.featSelected.filter(item => {
          return item.id != featId;
        });
        this.queryParams.featIds=this.featSelected.map(item =>(item.id));
        //console.log(this.queryParams.featIds);
        this.queryParams.searchValue=this.queryParams.featIds.length;
        this.handleQuery();
      },

      /** 搜索按钮操作 */
      handleQuery() {
        this.getList();
        //this.getFeatOptions();
      },

      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.queryParams.featId = undefined;
        this.handleQuery();
      },

    }
}

</script>

<style scoped>
  .search-container {
    width: 100vh;  
    display: flex;
  }
  .top{
    margin-top: 20px;
  }
  .select{
    
    width: 260px;
  }
 .search-icon{
    margin-left: 5px;
 }
  .top-tag{
    margin-left: 10px;
    height: 41px;
    border-radius: 5px;
  }
  .tag{
    margin-left: 5px;
  }
  .button-new-tag{
    /* display: none; */
    margin-left: 5px;
  }

  .input-new-tag{
    margin-left: 5px;
    width: 100px;
  }
  .Arrange-setting{
    margin-left: 10px;
    height: 40px;
    border-radius: 5px;
  }
  .text {
    font-size: 14px;
  }

  .item {
    padding: 18px 0;
  }

  .box-card-tag {
    margin-top: 20px;
    width: 320px;
    height: 86.5vh;
  }
  .box-card-result{
    margin-top: 20px;
    margin-left: 10px;
    height: 86.5vh;
  }
  .time {
    font-size: 13px;
    color: #999;
  }
  
  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 360px;
    height: 180px;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
      display: table;
      content: "";
  }
  
  .clearfix:after {
      clear: both
  }
</style>